<template>
    <div class="common-layout">
        <el-container>
            <el-header>
                <h1 v-if="surveyObj != null">{{ surveyObj.surveyTitle }}</h1>
            </el-header>
            <el-container>
                <el-aside width="300px">
                    <el-empty description="description" v-if="answerList==[]" />
                    <div class="user_card" v-for="answer in answerList" :key="answer.answerId" @click="view(answer)">
                        <img class="user_img" alt="" srcset="" 
                        :src="answer.user.picture==null?require('@/assets/img/avatar.png'):answer.user.picture">
                        <strong style="float:left">{{ answer.user.nickname }}</strong>
                        <br>
                        <small>{{ answer.user.areaFormatted }}</small>
                    </div>
                </el-aside>
                <el-main v-if="answer!=null" v-loading="answer == null">
                    <h2>{{ answerObj.user.nickname }}</h2>
                    <div class="answer_item" v-for="an in answer" :key="an.title">
                        <strong>问：{{ an.title }}</strong>
                        <p>答：{{ an.content }}</p>
                    </div>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>
<script>
export default {
    data() {
        return {
            surveyObj: undefined,
            answerObj:undefined,
            user: undefined,
            answerList: undefined,
            answer: undefined,
        }
    },
    created() {
        this.$store.dispatch("updateUser").then(() => {
            this.user = this.$store.state.user;
        });
        this.getSurvey();
    },
    methods: {
        getSurvey() {
            this.$request.get("/survey/" + this.getQueryVariable("surveyId")).then(resp => {
                this.loading = false
                if (!resp.success) {
                    this.errorMsg = resp.msg
                    return
                }
                this.surveyObj = resp.data;
                this.surveyObj.surveyContent = JSON.parse(this.surveyObj.surveyContent);
                this.getAnswerList()
            });
        },
        getAnswerList() {
            this.$request.get('/answer/list-answer/' + this.surveyObj.surveyId).then(resp => {
                if (resp.data != null) {
                    // this.formAnswer(JSON.parse(resp.data.answerContent))
                    this.answerList = resp.data
                    this.view(this.answerList[0])
                }
            })
        },
        formAnswer(answerObj) {
            this.answer = []
            this.surveyObj.surveyContent.forEach(el => {
                this.answer.push({
                    title: el.title,
                    content: answerObj[el.field]
                })
            })
        },
        view(answerObj) {
            this.answerObj=answerObj
            this.formAnswer(JSON.parse(answerObj.answerContent))
        },
        getQueryVariable(variable) {
            var query = window.location.search.substring(1);
            var vars = query.split("&");
            for (var i = 0; i < vars.length; i++) {
                var pair = vars[i].split("=");
                if (pair[0] == variable) {
                    return pair[1];
                }
            }
            return (false);
        }
    },
}
</script>
<style scoped>
.user_img {
    width: 45px;
    border-radius: 50%;
    height: 45px;
    margin-right: 10px;
    float: left;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.answer_item {
    padding: 10px 20px;
    border-bottom: 1px solid #DCDFE6;
}

.answer_item strong {
    padding-left: 5px;
    color: #303133;
    margin-bottom: 10px;
}

.answer_item p {
    color: #606266;
    margin-top: 10px;
    text-indent: 20px;
}

.user_card {
    border-radius: 4px;
    padding: 10px;
    cursor: pointer;
    margin-bottom: 10px;
    border: 1px solid var(--el-border-color);
}</style>